<template>
  <view>
    <view class="fix">
      <view class="topBox">
        <view class="topScreenBox">
          <view class="searchCell">
            <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719815210371515.png" class="searchimg">
            </image>
            <view class="scInp">
              <input type="text" v-model="searchContent" placeholder="请输入成员昵称" maxlength="10"
                placeholder-class="placname" @input="blurSearch" />
            </view>
          </view>
          <view class="scBtnBox">
            <view class="scSumBtn" @click="subSearch">搜索</view>
          </view>
        </view>
      </view>
      <!-- v-if="IsTeamuser == 1" -->
      <view class="navbox" v-if="IsTeamuser == 1">
        <view class="navtext" :class="{ 'text4': navindex == index }" v-for="(item, index) in navlist" :key="index"
          @click="navswitch(index)">
          {{ item }}
          <view v-if="navindex == index" class="aft4"></view>
        </view>
      </view>
    </view>
    <view class="managetext" v-if="IsTeamuser == 1 && navindex == 0" @click="closebtn">管理</view>
    <view class="memberlist">
      <block v-if="memberlist.length > 0">
        <view class="memberbox" v-for="(item, index) in memberlist" :key="index"
          @click="nav_to('/pages/user/user_visitor?id=' + item.UserID)">
          <image class="hdimg" mode="aspectFill" :src="item.HeadImgUrl"></image>
          <view class="ringtbox">
            <view class="meinfo">
              <view class="type" v-if="item.IsAdmin == 1">圈主</view>
              <view class="name">{{ item.Name ? $util.entitiesToUtf16(item.Name) : '' }}</view>
              <image v-if="item.UserType != '普通用户'" class="vipicon"
                src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png" mode="widthFix"></image>
            </view>
            <view class="addretext">{{ item.City ? item.City : '' }}</view>
          </view>
          <view class="delbtn" v-if="isclose && userinfo.UserID != item.UserID && navindex == 0"
            @click.stop="DeleteUser(item.TeamID, item.UserID, index)">
            <view class="linew"></view>
          </view>
          <!-- v-if="!isclose && IsTeamuser == 1" -->
          <view class="stabox" v-if="IsTeamuser == 1 && navindex == 1">
            <view class="Agreebtn" @click.stop="AuditMember(item.TeamID, item.UserID, index, 1)">同意</view>
            <view class="Refusebtn" @click.stop="AuditMember(item.TeamID, item.UserID, index, -1)">拒绝</view>
          </view>
        </view>
        <view v-if="memberlist.length > 11" style="height: 150rpx;"></view>
      </block>
      <block v-else>
        <view style="height:100vh;background-color:#fff;">
          <u-empty mode="list" width="100" height="100"
            icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
            iconSize="32" text="暂无成员"></u-empty>
        </view>

      </block>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isMore:true,
      Sta: 1,
      searchContent: '', // 查询
      isclose: false,
      IsTeamuser: 0, //是否是圈主
      cirID: '',//圈子ID
      memberlist: [],
      navlist: ['成员管理', '待审核'],
      navindex: 0,
      PageIndex: 1,
      PageSize: 15,
      userinfo: {},
    };
  },

  onLoad(e) {
    this.cirID = e.id
    if (e.IsTeamuser) {
      this.IsTeamuser = e.IsTeamuser
    }
    if (e?.type == 2) {
      this.navswitch(1)
    }else{
      this.navswitch(0)
    
    }
    this.userinfo = uni.getStorageSync("user");
  },
  // 触底事件
  onReachBottom() {
      this.PageIndex++
      this.TeamUsers()
  },
  methods: {
    // 点击搜索
    subSearch() {
      this.PageIndex == 1
      this.TeamUsers()
    },
    blurSearch() {
      if (this.searchContent == '') {
        this.PageIndex == 1
        this.memberlist = []
        this.TeamUsers()
      }

    },
    async AuditMember(TeamID, ID, index, sta) {
      let _this = this
      let title = sta == 1 ? '同意' : '拒绝'
      uni.showModal({
        title: "温馨提示",
        content: "您确定" + title + "该成员吗？",
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post("Team/AuditMember", {
              UserID: ID,
              TeamID: TeamID,
              Status: sta
            })
            if (res1.code == 0) {
              _this.$pv.msg("操作成功");

              _this.memberlist.splice(index, 1)
            }
          } else if (res.cancel) {
          }
        },
      });
    },
    closebtn() {
      this.isclose = !this.isclose
    },
    //移除成员
    async DeleteUser(TeamID,ID,index) {
      console.log('11111');
      
      let _this = this
      uni.showModal({
        title: "温馨提示",
        content: "您确定要移除该成员吗？",
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post("Team/DeleteUser", {
              UserID: ID,
              TeamID: TeamID
            })
            if (res1.code == 0) {
              _this.$pv.msg("移除成功");

              //  _this.PageIndex = 1
              _this.memberlist.splice(index, 1)
              //  _this.TeamUsers()
            }
          } else if (res.cancel) {
          }
        },
      });
    },
    //成员列表
    async TeamUsers() {
      let res = await this.$api.post("Team/MyTeamUsers", {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        TeamID: this.cirID,
        Status: this.Sta,
        Name: this.searchContent
      })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.memberlist = res.data
        } else {
          this.memberlist = this.memberlist.concat(res.data)
        }
        this.isMore =
          Array.isArray(res.data) && res.data.length >= this.PageSize;
      }
    },
    //列表切换
    navswitch(index) {
      this.navindex = index
      if (index == 0) {
        this.memberlist = []
        this.PageIndex = 1
        this.Sta = 1
        this.TeamUsers()
      } else if (index == 1) {
        this.memberlist = []
        this.PageIndex = 1
        this.Sta = 0
        this.TeamUsers()
      }
    },
  },
}
</script>
<style lang='scss'>
page {
  background-color: #f6f6f6;
}

.managetext {
  font-size: 28rpx;
  color: #706EEE;
  margin: 16rpx 0;
  text-align: end;
  margin-right: 24rpx;
}

.memberlist {
  margin-top: 16rpx;
  background-color: #fff;
  // padding-bottom: 100rpx;
}

.memberbox {
  padding: 24rpx 24rpx 0 24rpx;
  background-color: #fff;
  display: flex;
  // align-items: center;
  position: relative;

  .hdimg {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    // background-color: #706eee;
    margin-right: 24rpx;
  }

  .ringtbox {
    flex: 1;
    border-bottom: 2rpx solid #E4E4E4;
    padding-bottom: 26rpx;

    .meinfo {
      display: flex;
      align-items: center;

      .type {
        width: 60rpx;
        height: 32rpx;
        background: #706EEE;
        border-radius: 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22rpx;
        color: #fff;
      }

      .name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
        margin: 0 8rpx;
      }

      .vipicon {
        width: 88rpx;
        height: 36rpx;
      }
    }

    .addretext {
      font-size: 24rpx;
      color: #909090;
      margin-top: 12rpx;
    }
  }

  .delbtn {
    width: 40rpx;
    height: 40rpx;
    background: #FC201C;
    border-radius: 50%;
    position: absolute;
    right: 34rpx;
    top: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .linew {
      width: 24rpx;
      height: 4rpx;
      background: #FCFCFC;
    }
  }

  .stabox {
    display: flex;
    align-items: center;

    .Agreebtn {
      width: 120rpx;
      height: 56rpx;
      border-radius: 28rpx;
      background-color: #706EEE;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #fff;
      margin-right: 20rpx;
    }

    .Refusebtn {
      width: 120rpx;
      height: 56rpx;
      border-radius: 28rpx;
      border: 2rpx solid #E6E6E6;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #333333;
    }
  }
}
.memberbox:last-child .ringtbox{
  border-bottom: 0 !important;
}
.fix {
  position: relative;
  background-color: #fff;
  width: 750rpx;
  top: 0;
  left: 0;
  z-index: 999;
  padding-top: 20rpx;

  .endimg {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    z-index: 1000;
    right: 150rpx;
    bottom: 28rpx;
  }

  .navbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;

    .navtext {
      width: calc(100% / 2);
      height: 100%;
      font-size: 28rpx;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

    }

    .text4 {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;

      .aft4 {
        width: 40rpx;
        height: 8rpx;
        background: #706EEE;
        border-radius: 4rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

.tabs {
  box-sizing: border-box;
  z-index: 200;
  height: 44px;
  width: 750rpx;
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 20rpx;

  .city {
    height: 60rpx;
    // width: 140rpx;
    width: 160rpx;
    margin-right: 6rpx;
    display: flex;
    align-items: center;

    .hlogo {
      //   width: 136rpx;
      //   height: 60rpx;
      width: 48rpx;
      height: 48rpx;
    }

    .link-1 {
      max-width: 96rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;

      .linkcity {
        color: #333333;
      }
    }
  }

  .img2 {
    height: 36rpx;
    width: 36rpx;
    margin-right: 266rpx;

    .zuju {
      color: #333333;
      font-size: 36rpx;
    }
  }

  .tab1,
  .tab2 {
    font-size: 32rpx;
    font-weight: 500;
    margin-right: 30rpx;
    line-height: 44px;
    color: #666666;
  }

  .tab1 {
    margin-left: 126rpx;
  }

  .tab4 {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    position: relative;
  }

  .aft4 {
    width: 64rpx;
    height: 10rpx;
    border-radius: 6rpx;
    background: linear-gradient(180deg, #a9a7f8 0%, #9796ed 100%);
    position: absolute;
    bottom: 8rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}

.topBox {
  width: 100%;
  padding: 0 30rpx;
  padding-bottom: 25rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .topFastBtn {
    padding: 13rpx 24rpx;
    background: #706eee;
    border-radius: 32rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    image {
      width: 24rpx;
      height: 24rpx;
    }

    .topFastText {
      font-size: 24rpx;
      color: #ffffff;
    }

    .topFastNum {
      position: absolute;
      top: -16rpx;
      right: -10rpx;
      width: 40rpx;
      background-color: red;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      font-size: 20rpx;
    }
  }
}

.searchCell {
  width: 100%;
  display: flex;
  align-items: center;
  // margin-top: 20rpx;

  .scIcon {
    margin-right: 16rpx;
  }

  .scInp {
    width: 380rpx;
    //   background: #f2f2f2;
    border-radius: 100rpx;
    //   padding: 10rpx 30rpx;

    >input {
      width: 100%;
      background: transparent;
    }

  }
}

.topScreenBox {
  width: 100%;
  display: flex;
  align-items: center;

  .searchCell {
    width: 100%;
    height: 72rpx;
    display: flex;
    align-items: center;
    border: 2rpx solid #706EEE;
    border-radius: 36rpx;
    background-color: #f2f2f2;

    .scIcon {
      margin-right: 16rpx;
    }

    .searchimg {
      width: 32rpx;
      height: 32rpx;
      margin-left: 24rpx;
    }

    .scInp {
      flex: 1;
      margin-left: 5rpx;

      >input {
        width: 100%;
        background: transparent;
      }

      .placname {
        color: #999999;
        font-size: 24rpx;
      }
    }

  }

  .scBtnBox {
    display: flex;
    // margin-left: auto;
    margin-right: 8rpx;

    .scSumBtn {
      // padding: 13rpx 34rpx;
      width: 136rpx;
      height: 64rpx;
      background: #706eee;
      border-radius: 32rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      &:last-child {
        margin-left: 20rpx;
      }
    }
  }

  .tagBox {
    width: 100%;
    // overflow-y: auto;
    margin-top: 20rpx;
    padding-bottom: 20rpx;

    .tagList {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;

      .tagCell {
        padding: 10rpx 20rpx;
        border-radius: 12rpx;
        border: 2rpx solid #706eee;
        background: white;
        color: #706eee;
        margin: 0 20rpx 10rpx;
        margin-left: 0;
        white-space: nowrap;
        font-size: 22rpx;
      }

      .tagIng {
        border: 2rpx solid #706eee;
        background: #706eee;
        color: white;
      }
    }
  }
}
</style>